<template>
	<Layout>
        <Form ref="form1" :model="form1" :label-width="120">
            <Row  class="query-form" style="padding-top: 15px">
                <Col span="8">
                    <FormItem label="模板名称：" prop="modelName">
                        <Input class="query-form-el" type="text" v-model="form1.modelName"/>
                    </FormItem>
                </Col>
                <Col span="16">
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table'  :loading="loading" size="small" :height="tableHeight" class="table" no-data-text="没有查询到相关数据!"
               highlight-row stripe border :columns="columns1" width="100%" :data="dataTable">
        </Table>

        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
    </layout>
</template>

<script>
	import {Api} from '../../../../api/index.js'
    import { sessionStorage } from '../../../../common/cacheUtils.js';
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
	export default {
		data() {
			return {
                switchFlag : false,
                form1: {

				},
                //分页参数
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
				columns1: [{
						type: 'index',
						width: 60,
						align: 'center',
					},
					/*{
                        type: 'index',
                        title: '序号',
                        width: 70,
                        align: 'center',
                    },*/
					{
                        width: 300,
                        minWidth: 100,
                        title: '模板名称',
                        key: 'modelName',
                        align: 'center'
                    },
                    {
                        minWidth: 150,
                        title: '所属组织机构',
                        align: 'center',
                        key: 'orgName'
					},
					{
                        minWidth: 110,
                        title: '模板类型',
                        key: 'modelTypeName',
                        align: 'center'
                    },
                    {
                        minWidth: 100,
                        title: '创建人',
                        key: 'createUserName',
                        align: 'center'
                    },
                    {
                        minWidth: 120,
                        title: '创建时间',
                        key: 'createDate',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: { type: 'primary', size: 'small' },
                                    style: { marginRight: '5px' },
                                    on: {
                                        click: () => {
                                            this.save(params.row);
                                        }
                                    }
                                }, '选择'),
                            ]);
                        }
                    }
				],
                dataTable: [],
                tableHeight:'',loading: false,
			}
		},
        mounted: function() {
            this.tableHeight = window.innerHeight*0.7;
            // this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query();
        },
		methods: {
            setQueryOrgId(data) {
                this.form1.belongOrgId = data[data.length - 1];
            },
            setQueryOrgName(data) {
                this.form1.belongOrgName = data;
            },
            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },

            save(row){
                this.$emit('getSelectModelData',row);
            },

            query() {this.loading = true ;
                let data = {
                    currentPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                    userId : JSON.parse(sessionStorage('paramUserInfo').get('userInfo'))["createUserId"]
                }

                data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));

                let url = Api.getModelList;
                this.$http.get(url, {params: data}).then((res) => {
                    this.dataTable = res.data.data;
                    this.pagedata.total = res.data.totalSize;this.loading = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            reset() {
                this.form1 = {};
                this.query();
            },
        }
	}
</script>
